<style lang="css" scoped src="./container.component.css"></style>
<template>
	<div class="selector">
		<a-select class="each"
				  v-model:value="provinceValue"
				  :loading="provinceLoading"
				  :options="provinceList.map(province => ({ label: province.name, value: province.adcode }))"
				  @change="getCityList">
		</a-select>
		<a-select class="each"
				  v-model:value="cityValue"
				  :loading="cityLoading"
				  :options="cityList.map(city => ({ label: city.name, value: city.adcode }))"
				  @change="getDistrictList">
		</a-select>
		<a-select class="each"
				  v-model:value="districtValue"
				  :loading="districtLoading"
				  :options="districtList.map(district => ({ label: district.name, value: district.adcode }))">
		</a-select>
		<a-button type="primary" :loading="areaLoading" @click="showAreaOnMap()">查看</a-button>
	</div>
	<div class="map" ref="mapEleRef"></div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
import type { Feature } from "ol";
import type { ProvinceType } from "@/model/province.type";
import type { CityType } from "@/model/city.type";
import type { DistrictType } from "@/model/district.type";
import { QueryService } from "@/service/query.service";
import { MapBase } from "@/map/map-base";
import { MapWrap } from "@/map/map-wrap";
import { Point } from "@/map/point";
import { MapDraw } from "@/map/map-draw";

export default defineComponent({
	name: 'ContainerComponent',
	setup() {
		let mapBase!: MapBase;
		const state = reactive<{
			provinceLoading: boolean, provinceList: Array<ProvinceType>, provinceValue: string,
			cityLoading: boolean, cityList: Array<CityType>, cityValue: string | null,
			districtLoading: boolean, districtList: Array<DistrictType>, districtValue: string | null,
			areaLoading: boolean,
		}>({
			// 省
			provinceLoading: false,
			provinceList: [],
			provinceValue: '100000',
			// 市
			cityLoading: false,
			cityList: [],
			cityValue: null,
			// 区
			districtLoading: false,
			districtList: [],
			districtValue: null,
			//
			areaLoading: false,
		});
		return {
			mapBase,
			...toRefs(state),
		};
	},
	methods: {
		getProvinceList(): void {
			// 重置
			this.provinceList = [];
			this.provinceValue = '100000';
			this.cityList = [];
			this.cityValue = null;
			this.districtList = [];
			this.districtValue = null;
			// 查询
			this.provinceLoading = true;
			QueryService.getAllProvinces().then((res) => {
				this.provinceLoading = false;
				this.provinceList = res.data;
			});
		},
		getCityList(adcode: string): void {
			// 重置
			this.cityList = [];
			this.cityValue = null;
			this.districtList = [];
			this.districtValue = null;
			// 查询
			this.cityLoading = true;
			QueryService.getCitiesByProvinceAdcode({ adcode: adcode }).then((res) => {
				this.cityLoading = false;
				this.cityList = res.data;
			});
		},
		getDistrictList(adcode: string): void {
			// 重置
			this.districtList = [];
			this.districtValue = null;
			// 查询
			this.districtLoading = true;
			QueryService.getDistrictsByCityAdcode({ adcode: adcode }).then((res) => {
				this.districtLoading = false;
				this.districtList = res.data;
			});
		},
		showAreaOnMap(): void {
			let adcode = this.districtValue || this.cityValue || this.provinceValue;
			this.areaLoading = true;
			setTimeout(() => {
				QueryService.getAreaByAdcode({ adcode: adcode }).then((res) => {
					this.areaLoading = false;
					this.draw(res.data.polyline)
				});
			}, 500);
		},
		draw(polyline: string): void {
			MapWrap.removeAllFeatures(this.mapBase, this.mapBase.drawLayerName);
			let features: Array<Feature> = [];
			let blocks = polyline.split('|');
			blocks.forEach((block) => {
				let points = block.split(';');
				let polygon: Array<Point> = [];
				points.forEach((point) => {
					let p = point.split(',');
					polygon.push(new Point(Number(p[0]), Number(p[1])));
				});
				let feature = MapDraw.createPolygonFeature(polygon);
				features.push(feature);
				MapWrap.addFeature(this.mapBase, this.mapBase.drawLayerName, feature);
			});
			MapWrap.setFitViewByFeatures({
				map: this.mapBase,
				features: features,
				padding: [32, 32, 32, 32]
			});
		}
	},
	created() {
		this.getProvinceList();
	},
	mounted() {
		this.mapBase = new MapBase(this.$refs.mapEleRef);
	}
});
</script>